import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Button, Col, Form, Input, Row, Space, Table, message } from 'antd';
import { Ref, useContext, useRef, useState } from 'react';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { SupplierLocaldataContext } from '../common';
import { SelectBankService } from '../services';
import { selectBankColumns } from '../mconfig';
import { onCloseModalCommon } from '@/utils';

const SelectBankModal = ({ onClose, onSave }) => {
  /**
   * 弹框的ref
   * */
  const modalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 结构上下文
   * */
  const { curRes, updateFixCls } = useContext(SupplierLocaldataContext);

  /**
   * 表格选中项
   * */
  const [selectKey, setSelectKey] = useState<Record<string, any>>({});

  /**
   * 获取数据
   * */
  const { loading, getBankRun, reloadRefresh, data, pagination } = SelectBankService();

  /**
   * 搜索表单ref
   * */
  const [bankForm] = Form.useForm();

  /**
   * 关闭弹窗
   * */
  const onCloseModal = () => {
    onClose();
  };

  /**
   * 确定按钮
   * */
  const onOkModal = () => {
    if (selectKey?.valNode) {
      onSave(selectKey?.valNode);
      onCloseModalCommon(modalRef);
    } else {
      message?.warn('请选择开户行！');
    }
  };

  /**
   * 分页改变
   * */
  const onPagination = (current, pageSize) => {
    const searchValues: Record<string, any> = bankForm?.getFieldsValue();
    getBankRun({ ...searchValues, ...pagination, current, pageSize });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={modalRef}
        title={'选择开户行'}
        onCancel={onCloseModal}
        onOk={onOkModal}
        width={document.body.clientWidth * 0.55}
        bodyStyle={{
          padding: '10px',
          height: document.body.clientHeight * 0.6,
          overflow: 'hidden',
        }}
        confirmLoading={loading}
        className={updateFixCls + 'selectBankModal'}
      >
        <div className={updateFixCls + 'selectBankModal-RowBox'}>
          <div>
            <Form form={bankForm}>
              <Row gutter={16}>
                <Col span={4}>
                  <Form.Item label="" name="bankName">
                    <Input allowClear placeholder="开户行名称" />
                  </Form.Item>
                </Col>
                <Col span={20}>
                  <div style={{ textAlign: 'right' }}>
                    <Space>
                      <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        onClick={() => {
                          const searchValues: Record<string, any> = bankForm?.getFieldsValue();
                          getBankRun({ ...searchValues, ...pagination, current: 1 });
                        }}
                      >
                        搜索
                      </Button>
                      <Button
                        icon={<ReloadOutlined />}
                        onClick={() => {
                          bankForm?.resetFields();
                          getBankRun({});
                        }}
                      >
                        重置
                      </Button>
                    </Space>
                  </div>
                </Col>
              </Row>
            </Form>
          </div>
          <div className={updateFixCls + 'selectBankModal-ColFlexAuto'}>
            <div className={`list-table`}>
              <Table
                size="small"
                bordered={true}
                loading={loading}
                style={{ margin: '0' }}
                scroll={{ x: 800, y: 'auto' }}
                dataSource={data?.rows || []}
                columns={selectBankColumns()}
                rowKey={'bankCode'}
                pagination={{
                  current: pagination?.current,
                  pageSize: pagination?.pageSize,
                  total: pagination?.total,
                  onChange: onPagination,
                }}
                rowSelection={{
                  type: 'radio',
                  selectedRowKeys: selectKey?.valKey,
                  onChange: (valKey: React.Key[], valNode) => setSelectKey({ valKey, valNode }),
                }}
                onRow={(record) => {
                  return {
                    onClick: (event) => {
                      let { bankCode } = record;
                      setSelectKey({ valKey: [bankCode], valNode: record });
                    },
                  };
                }}
              />
            </div>
          </div>
        </div>
      </OneModal>
    </>
  );
};

export { SelectBankModal };
